import { useState, memo } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <Foo />
    </div>
  );
}

// 无论自己有没有更改，每次父组件更新都会重新渲染
// function Foo() {
//   console.log("Foo组件被重新渲染了");
//   return <div>Foo组件</div>;
// }

// 使用memo
const Foo = memo(function () {
  console.log("Foo组件被重新渲染了");
  return <div>Foo组件</div>;
});

export default App;
